import React, { useEffect, useState } from 'react'
import { homeApi, getPracticeApi, getSelectQuestionApi } from '@/Api'
import ListAltIcon from '@material-ui/icons/ListAlt';
import './fastItem.less'
import { Button } from '@material-ui/core';
import { useHistory } from 'react-router';
import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos';
import GoBack from '@/components/SQGridList/GoBack'
export default function FastItem(props) {
    const history = useHistory();
    const [recordsArr, setRecordsArr] = useState([])
    const [itemArr, getItemArr] = useState([])
    // 修改一个要获取的试题类型
    const [testType, setTestType] = useState('all')
    // 修改一下要获取的题目的类型
    const [questionType, setQuestionType] = useState('all')
    const [testNum, setTestNum] = useState(0)
    useEffect(() => {
        console.log(props.location.state.actionCode);
        homeApi({actionCode:props.location.state.actionCode}).then(res => {
            console.log(res);
            setRecordsArr(res.data.exemItems)
        }).catch(err => {
            console.log(err);
        })

    }, [])
    const openListFn = async (item) => {
        // 只选择一个
        recordsArr.forEach(el => el.openList = false)
        item.openList = !item.openList
        const temp = JSON.parse(JSON.stringify(recordsArr))
        setRecordsArr(temp)
        const res = await getSelectQuestionApi({
            actionCode: item.actionCode,
            testType: 'all'
        })
        let { data } = res
        setTestNum(data[0].value)
        let params = {
            testType,
            questionType,
            testNum: data[0].value,
            actionCode: item.actionCode
        }
        localStorage.setItem('state', JSON.stringify(params))
        const resArr = await getPracticeApi(params);
        console.log(resArr);
        getItemArr(resArr.data)

    }
    const goToTest = (index) => {
        history.push({
            pathname: '/practice',
            state: {
                liIndex: index
            }
        })
    }
    return (
        <div className="fast-li-item">
            <ul className="fast-ul">
                {
                    recordsArr?.map(item => {
                        return (
                            <li className="fast-item" key={item.key}>
                                <div className="fast-li flex">
                                    <div className="left flex">
                                        <ListAltIcon />
                                        <span>
                                            {item.title}
                                        </span>
                                    </div>
                                    <div className="right">
                                        <Button variant="contained" color="primary" onClick={() => openListFn(item)}>刷题</Button>
                                    </div>
                                </div>
                                <ul className={!item.openList ? "hide" : ""}>
                                    {
                                        itemArr?.map((e, index) => {
                                            return (
                                                <li className="flex" id={e.id} onClick={() => goToTest(index)}><span>{e.title}</span><ArrowForwardIosIcon /></li>
                                            )
                                        })
                                    }
                                </ul>
                            </li>
                        )
                    })
                }
            </ul>
            <GoBack></GoBack>
        </div>
    )
}
